<template>
	<view>
		<view @click="getMapLocation" url="/pages/map/map" class="head flex-y-center">
			<image src="@/static/img/dw.png" class="dwicon"></image>
			<view>{{address||'定位中...'}}</view>
			<image src="@/static/img/bjiantou.png" class="icon"></image>
		</view>
		<view class="placeholder"></view>
		<navigator url="/pages/search/search" class="flex-y-center search">
			<image src="@/static/img/sousuo.png" class="icon"></image>
			<view class="flex-grow-1">输入搜索关键词</view>
		</navigator>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="banner-container" autoplay="true" circular="true" interval="3000" duration="1000"
				previous-margin="50rpx" next-margin="50rpx" @change="cIndex">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<image @click="jumpUrl(item);" class="slide-image" :class="[ currentIndex === index ? 'active':'' ]" :src="item.image">
						</image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="menu-navigation">
			<swiper style="height: 100%;">
				<swiper-item class="flex">
					<view v-for="(item,index) in nav_list" :key="index" class="menu-lg" @click="jumpUrl(item);">
						<image :src="item.image">
						</image>
						<view>{{item.title}}</view>
					</view>
					<!-- <navigator url="/pages/group/group" class="menu-lg ">
						<image src="@/static/img/003.png">
						</image>
						<view>优惠团购</view>
					</navigator> -->
					<!-- <navigator url="/pages/settlement/settlement" class="menu-lg ">
						<image src="@/static/img/004.png">
						</image>
						<view>商家入驻</view>
					</navigator>
					<navigator url="/pages/useExplain/useExplain" class="menu-lg ">
						<image src="@/static/img/005.png">
						</image>
						<view>使用说明</view>
					</navigator> -->
				</swiper-item>
			</swiper>
			<view class="add-c-d">
				<view style="display: inline-block;">
					<view class="add-f-s-1"></view>
				</view>
			</view>
		</view>
		<!-- 一元霸王餐 -->
		<navigator url="/pages/storeList/storeList?tag=3" hover-class="none" class="limit-store-container">
			<view class="header">
				<image class="header-icon" style="width: 96px;" :src="tag_3.image">
				</image>
				<view class="right">
					<text class="more-text">查看更多</text>
					<image style="width: 15px; height: 15px;" src="@/static/img/arrowBlack.png">
					</image>
				</view>
			</view>
			<view class="body">
				<scroll-view enable-flex="true" class="scroll-list">
					<div class="scroll-view">
						<div class="scroll-view" style="overflow-x: auto; overflow-y: hidden;">
							<div class="scroll-view-content">
								<view style="display: flex;">
									<view class="scroll-item" v-for="(item,index) in storeList" :key="index">
										<view class="item-row">
											<image class="scroll-img" :src="item.image">
											</image>
											<text class="amount-text">满{{item.pay_fee}}得{{item.cash_back}}
											</text>
										</view>
										<view class="item-row">
											<text class="scroll-name overflow-hidden">
												{{item.name}}</text>
										</view>
										<view class="item-row">
											<text class="stock-text">还剩<text class="stock">{{item.stock}}</text>
												份</text>
										</view>
									</view>
								</view>
							</div>
						</div>
					</div>
				</scroll-view>
			</view>
		</navigator>
		<!-- 优选商家 -->
		<navigator url="/pages/storeList/storeList?tag=2" hover-class="none" class="recommend-store-container">
			<view class="header">
				<view class="left">
					<image class="header-icon" style="width: 56px;" :src="tag_2.image">
					</image>
				</view>
				<navigator url="/pages/storeList/storeList" class="right">
					<text class="more-text">查看更多</text>
					<image style="width: 15px; height: 15px;" src="@/static/img/arrowBlack.png">

					</image>
				</navigator>
			</view>
			<view class="body">
				<view class="store-item" v-for="(item,index) in storeList2" :key="index">
					<view class="item-row">
						<image class="head-img" :src="item.image">
						</image>
						<text class="amount-text">满{{item.pay_fee}}得{{item.cash_back}}</text>
					</view>
					<view class="item-row">
						<text class="item-name overflow-hidden">{{item.name}}
						</text>
					</view>
					<view class="item-row">
						<text class="stock-text">还剩<text class="stock">{{item.stock}}</text>份</text>
					</view>
				</view>
			</view>
		</navigator>
	   <!-- 分类 -->
		<!-- <view class="variety-navigation">
			
			<view class="variety-swiper">
				<swiper class="menu-swiper h200" style="height: 100%;">
					
					<swiper-item v-for="(item1,index1) in cat_list" :key="index1"  class="flex swiper-iteme"
						style="position: absolute; width: 100%; height: 100%; transform: translate(100%, 0px) translateZ(0px);">
						<view class="menu-lg" @click="catChange(item2.id);"  v-for="(item2,index2) in item1" :key="index2">
							<image :src="item2.image">
							</image>
							<view class="">{{item2.name}}</view>
						</view>
						
					</swiper-item>

				</swiper>
				<view class="add-f-s">
					<view style="display: inline-block;">
						<view class="add-f-s-1"></view>
					</view>
					<view style="display: inline-block;">
						<view class="add-f-s-2"></view>
					</view>
				</view>
			</view>
			<view class="variety-text border-top">
				<view class="variety-navigation-icons flex-y-center">
					<view class="flex-y-center" style="margin-right: 9px;" @click="juliChange()">
						<view>距离</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[juliup==true?'arrowup':'arrowdown']">
						</image>
					</view>
					<view class="flex-y-center" style="margin-right: 9px;" @click="jiageChange()">
						<view>价格</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[jiageup==true?'arrowup':'arrowdown']">
						</image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 商家列表 -->
		<view>
			<view class="store-list">
				<view class="store-item" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(index)">
					<view class="rules-num" v-if="item.activity_count>1">
						<text><span>活动数{{item.activity_count}}</span></text>
					</view>
					<view class="head-item border-bottom info-item">
						<view class="item-left">
							<view class="mask" v-if="item.status=='2'">
								<image src="@/static/img/weizhifu.png" class="mask-img">
								</image>
							</view>
							<view class="mask" v-if="item.stock<=0">
								<image src="@/static/img/out-of-stock.png" class="mask-img">
								</image>
							</view>
							<image class="head-img" :src="item.image">
							</image>
						</view>
						<view class="item-right">
							<view class="item">
								<view class="title">{{item.name}}</view>
							</view>
							<view class="item">
								<view>还剩<text class="stock-text">
										{{item.stock}}</text>份</view>
								<view class="progress">
									<progress :percent="item.percent" activeColor="rgb(255, 150, 42)" stroke-width="8"
										border-radius="16" backgroundColor="rgba(255, 150, 42, 0.5)">
									</progress>

								</view>
							</view>
							<view class="item">
								<view class="distance-text" >距离：{{item.distance}}</view>
								<view class="time-region">可报名 {{item.open_start}}-{{item.open_end}}</view>
							</view>
						</view>
					</view>
					<view class="head-item border-bottom cashback-item">
						<view class="icon discount-text">送</view>
						<!-- <view class="text">会员满<text class="amount">
								{{item.vip_pay_fee}}</text>得:<text class="amount">
								{{item.vip_cash_back}}</text>
						</view> -->
						<view class="text">满<text class="amount">
								{{item.pay_fee}}</text>得:<text class="amount">
								{{item.cash_back}}</text>
						</view>
						<view>
							<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
							</image>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
							</image>
						</view>
					</view>
					<view class="head-item border-bottom address-item">
						<image class="icon" src="@/static/img/address-gray-ico.png">
						</image>
						<view class="address-text">{{item.address}}</view>
					</view>
				</view>
			</view>
			
			 <view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
				<view style="color:#444">暂无数据</view>
			  </view>
			  <view class="flex-y-center flex-x-center" style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">没有更多了~</view>
			  <view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt" class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
				  加载中...
			  </view>
				  
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	//const jWeixin = require("jweixin-module");
	//const jWeixin = require ('../../utils/jweixin-1.6.0.js');
	//import jWeixin from 'weixin-js-sdk';
	
	// jwx.js
	let jweixin = require('jweixin-module')  



	import {getStoreList,getWxConfig,getIndexData} from '../../apirequest/api.js';
	export default {
		components: {

		},
		data() {
			return {
				lock:0,
				address:'',
				lat:'',
				lng:'',	
				distance:'',
				banner:[],
				nav_list:[],
				cat_list:[],
				currentIndex: 0,
				tag_2:[],
				tag_3:[],
				// 一元霸王餐商家
				storeList: [],
				// 优选商家
				storeList2: [],
				// 全部商家
				storeList3: [],
				juliup: false,
				jiageup: false,
				cat_id:0,
				sort:0,
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
					
			}
		},
		
	  /**
	   * 页面上拉触底事件的处理函数
	   */
	  onReachBottom: function (t) {
		var o = this;
		o.loadDataList(function () {
		  o.data.loading_more = !0;
		});
	  },
	  
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let longitude = uni.getStorageSync('longitude');
			let latitude = uni.getStorageSync('latitude');
			let address = uni.getStorageSync('address');
			let that = this;
			that.address = address;
			//if (!longitude || !latitude || !address) {
			if (1==1) {
				/* uni.showLoading({
					title: '定位中...',
					mask: true
				}); */
				//this.dingwei(jWeixin);
				/* wx.getLocation({
				  type: 'wgs84',
				  success: function (res) {
				    console.log(res);
					that.getLocal(res.latitude,res.longitude,function(){
						that.lat = res.latitude;
						that.lng = res.longitude;
						uni.hideLoading()
						uni.setStorageSync('longitude',res.longitude);
						uni.setStorageSync('latitude',res.latitude);
						that.loadData();
						that.loadDataList();
					});
				  },
				  cancel: function (res) {
					uni.hideLoading()
					uni.showToast({
						title:'用户拒绝授权获取地理位置',
						icon:'error'
					});
				  }
				}); */
			} else {
				that.loadData();
				if (longitude!=that.lng || latitude != that.lat) {
					that.lat = latitude;
					that.lng = longitude;
					that.data = {
						data_list: [],
						no_list: !1,
						no_more: !1,
						current_page: 0,
						loading_more: !0,
					};
					that.loadDataList();
				}
			}
		},
		onLoad(options) {
			let that = this;
			if(options.pid){
				uni.setStorageSync('parent_id',options.pid)
			}
		},
		methods: {
			getMapLocation(){
				uni.chooseLocation({
					success:(res)=> {
						console.log(res);
						// this.getRegionFn(res);
					},
					fail:()=>{
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
								// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
											// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success:(data)=>{
													// 如果用户授权了地理信息在，则提示授权成功
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	// this.getRegionFn(res);
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				});
			},
			dingwei:function(wx){
				let that = this;
				var url = window.location.href.split('#')[0];
				uni.showToast({
					title:url,
				});
				getWxConfig({url:url}).then((res) => {
					if(res.code == 1){
						wx.config({
						    debug: true,
						    appId: res.data.appId,
						    timestamp: res.data.timestamp,
						    nonceStr: res.data.nonceStr,
						    signature: res.data.signature,
						    jsApiList: [
								// 所有要调用的 API 都要加到这个列表中
							  'getLocation',
						    ]
						});
						 wx.ready(function () {
						    wx.checkJsApi({
						        jsApiList: [
						            'getLocation'
						        ],
						        success: function (res) {
						            // alert(JSON.stringify(res));
						            // alert(JSON.stringify(res.checkResult.getLocation));
						            if (res.checkResult.getLocation == false) {
						                //alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
										uni.showToast({
											title:'你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！',
											icon:'error'
										});
						                return;
						            }
						        }
						    }); 
						    wx.error(function(res){
						       // alert("接口调取失败")
								uni.showToast({
									title:'接口调取失败',
									icon:'error'
								});
						    });
						    wx.getLocation({
						      success: function (res) {
								  
						        alert(JSON.stringify(res));
						      },
						      cancel: function (res) {
								  uni.showToast({
								  	title:'用户拒绝授权获取地理位置',
								  	icon:'error'
								  });
						        //alert('用户拒绝授权获取地理位置');
						      }
						    });
						});
					}
				});
			},
			jumpUrl(item){
				/* console.log(item) */
				//自定义链接
				if (parseInt(item.links_id)==1&&item.url) {
					window.location.href = item.url;
				}
				if (parseInt(item.links_id)>0&&item.links) {
					let url = item.links.url;
					if (parseInt(item.param_id)>0) {
						url=url+item.param_id;
					}
					console.log(url)
					uni.navigateTo({
						url: ''+url+'',
					});
				}
			},
			// 获取当前地理位置
			 getLocal (latitude,longitude,callback) {
				 var data = {
		  　　　　　　location:latitude+","+longitude,
					  /*换成自己申请的key*/
		  　　　　　　key:"OCSBZ-VTV3P-IONDB-VSCQJ-MTZIH-VRBPG",
		  　　　　　　get_poi:0,
					 output:'jsonp',
		  　　　　}
				var url="http://apis.map.qq.com/ws/geocoder/v1/?";
				var that = this;
				//jsonp请求
				this.$jsonp(url, data).then(res => {
					console.log('+++++++++++',res);
					that.address = res.result.address_component.street;
					uni.setStorageSync('address',that.address);
					callback && callback(res);
				})
				.catch(error => {
					console.log(error);
				})
			},
			
			//获取数据
			loadData: function () {
			  getIndexData({}).then((res) => {
			  		if(res.code == 1){
			  			this.banner = res.data.banner;
						this.cat_list = res.data.cat_list;
						this.nav_list = res.data.nav_list;
						this.storeList = res.data.storeList;
						this.storeList2 = res.data.storeList2;
						this.tag_2= res.data.tag_2;
						this.tag_3= res.data.tag_3;
			  		}
			  }).catch(err => {
			  	console.log(err)
			  })
			  
			},			
			
			//获取数据列表
			  loadDataList: function (f) {
				var o = this;
				if (!o.lat || !o.lng) {
					return;
				}
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
				  var page = (o.data.current_page || 0) + 1;
				  var data = {
					page: page,
					latitude: o.lat,
					longitude: o.lng,
					category_id:o.cat_id,
					juliup:o.juliup?1:0,
					jiageup:o.jiageup?1:0,
					sort:o.sort,
				  }
				  o.lock = 1;
				  console.log(o.lock)
				  getStoreList(data).then((t) => {
				  	if(t.code == 1){
						  if (1 == t.data.current_page && !t.data.data.length) {
							  o.data.no_list= !0;
							  o.data.loading_more= !1
						  }
						 if (t.data.data && t.data.data.length) {
							 o.data.data_list = o.data.data_list || [];
							 o.data.data_list = o.data.data_list.concat(t.data.data), 
							 o.data.current_page= page;
						 }	
					     if (!t.data.has_more) {
							 o.data.no_more= !0;
						 }						  
						 
				  	}else{
				  		uni.showToast({
				  			title:'网络繁忙',
				  			icon:'error'
				  		})
				  	}
					o.lock = 0;
				  });
				}
			  },
			storeTap(index) {
			    let this_item = this.data.data_list[index];
				if (!this_item) {
					return;
				}
				if (parseInt(this_item.open_buy) == 0) {
					let time = this_item.open_start+"-"+this_item.open_end;
					uni.showToast({
						icon:'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});
					
				} 
				else if (parseInt(this_item.stock)<=0) {
					uni.showToast({
						icon:'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} 
				else {
					this.distance = this_item.distance;
					uni.navigateTo({
						url: '/pages/details/details?id=' + this_item.store_id
					})
				}

			},
			cIndex(e) {
				this.currentIndex = e.detail.current
			},
			catChange(id){
				this.cat_id = id;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f8fa;
		font-size: 0.75rem;
	}

	.head {
		background: #ff8546;
		color: #fff;
		position: fixed;
		padding: 25upx;
		font-size: 0.95rem;
		width: 100%;
		z-index: 99;
		top: 0;
		left: 0;
	}

	.head .dwicon {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	.head .icon {
		width: 30upx;
		height: 30upx;
		margin-left: 8upx;
	}

	.placeholder {
		width: 100%;
		height: 94upx;
	}

	.search {
		margin: 20upx 25rpx;
		border: 1px solid #fce072;
		border-radius: 40upx;
		padding: 10upx;

	}

	.search .icon {
		width: 40upx;
		height: 40upx;
	}

	.banner {
		height: 320rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		z-index: 999;
	}

	.banner .banner-container {
		width: 100%;
		height: 350rpx;
	}

	.banner .slide-image {
		position: absolute;
		height: 260rpx;
		width: 98%;
		border-radius: 10rpx;
		z-index: 5;
		opacity: 0.7;
		/*透明度*/
		top: 6%;
	}

	.banner .active {
		opacity: 1;
		z-index: 10;
		height: 320rpx;
		width: 98%;
		border-radius: 10rpx;
		top: 0%;
		transition: all 0.2s ease-in 0s;
	}

	.limit-store-container {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.limit-store-container .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9px;
		border-radius: 9px 9px 0 0;
		background: linear-gradient(180deg, #fff0e9 0, #fff)
	}

	.limit-store-container .header .header-icon {
		height: 14px
	}

	.limit-store-container .header .right {
		display: flex;
		align-items: center
	}

	.limit-store-container .header .right .more-text {
		color: #bec1c7
	}

	.limit-store-container .body .scroll-list {
		display: flex;
		align-items: center;
		width: unset;
		margin: 0 9px
	}

	.limit-store-container .body .scroll-list .scroll-item {
		display: flex;
		flex-flow: column;
		margin-top: 9px;
		margin-right: 9px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row {
		margin-bottom: 4px;
		position: relative
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-img {
		width: 93px;
		height: 69px;
		border-radius: 7px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-name {
		width: 93px;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock-text {
		font-size: 10px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock {
		color: #f96456
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .amount-text {
		font-size: 9px;
		color: #fff;
		border-radius: 0 7px 0 7px;
		background: linear-gradient(270deg, #ff8826 0, #ed3066);
		position: absolute;
		padding: 2px 4px;
		text-align: center;
		bottom: 0;
		left: 0
	}

	.limit-store-container .body .scroll-list .scroll-foot {
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 4px;
		border-radius: 9px;
		background-color: #f0f0f0
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-icon {
		width: 9px;
		height: 9px;
		padding: 2px;
		border: 1px solid #ebebeb;
		border-radius: 50%;
		margin-bottom: 4px
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-text {
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		letter-spacing: 2px
	}

	.overflow-hidden {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1
			/* 这里设置需要显示几行文本 */
		;
	}

	.recommend-store-container {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.recommend-store-container .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9px;
		border-radius: 9px 9px 0 0;
		background: linear-gradient(180deg, #fff0e9 0, #fff)
	}

	.recommend-store-container .header .left .header-icon {
		height: 14px
	}

	.recommend-store-container .header .right {
		display: flex;
		align-items: center
	}

	.recommend-store-container .header .right .more-text {
		color: #bec1c7
	}

	.recommend-store-container .body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 9px
	}

	.recommend-store-container .body .store-item {
		display: flex;
		flex-flow: column
	}

	.recommend-store-container .body .store-item .item-row {
		margin-bottom: 4px;
		position: relative
	}

	.recommend-store-container .body .store-item .item-row .head-img {
		width: 153px;
		height: 115px;
		border-radius: 7px
	}

	.recommend-store-container .body .store-item .item-row .item-name {
		width: 153px;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.recommend-store-container .body .store-item .item-row .stock-text {
		font-size: 10px
	}

	.recommend-store-container .body .store-item .item-row .stock {
		color: #f96456
	}

	.recommend-store-container .body .store-item .item-row .amount-text {
		font-size: 24rpx;
		color: #fff;
		border-radius: 0 7px 0 7px;
		background: linear-gradient(270deg, #ff8826 0, #ed3066);
		position: absolute;
		padding: 2px 4px;
		text-align: center;
		bottom: 0;
		left: 0
	}

	.variety-navigation {
		margin: 9px 14px;
		background-color: #fff;
		border-radius: 9px
	}

	.variety-navigation .variety-swiper {
		height: 86px;
		background-color: #fff;
		font-size: 24rpx;
		border-radius: 9px;
		padding: 7px 0
	}

	.variety-navigation .variety-swiper .menu-lg {
		width: 20%;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.variety-navigation .variety-swiper .menu-lg image {
		width: 48px;
		height: 48px;
		border-radius: 9px
	}

	.variety-navigation .variety-swiper .menu-lg .active {
		color: #f42f2f
	}

	.variety-navigation .variety-swiper .add-f-s {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -19px
	}

	.add-f-s-1 {
		width: 14px;
		height: 7px;
		border-radius: 15px;
		background-color: #ff8546;
	}

	.add-f-s-2 {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: rgba(253, 211, 41, .5);
		margin: 0px 2px;
	}

	.variety-text {
		padding: 14px;
		color: #afb0b1;
		font-size: 12px
	}

	.variety-text .arrowup {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	.variety-text .variety-image {
		margin: 0px 4px;
		width: 12px;
		height: 12px
	}

	.commodity {
		margin: 9px 14px;
		background-color: #fff;
		border-radius: 9px
	}

	/* 主题色 */
	.meituan {
		color: #333 !important;
		background-color: #ff8546
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 14px 9px 14px;
		padding: 9px 12px;
		position: relative;
		overflow: hidden
			/* 信息项 */
			/* 返现项 */
			/* 更多项 */
			/* 地址项 */
			/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .rules-num {
		position: absolute;
		background: linear-gradient(270deg, #ec5151 0, #ff5e3c 45%, #ffb15f);
		color: #fff;
		font-size: 9px;
		padding: 2px 14px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 7px;
		right: -15px
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 42px;
		height: 15px;
		text-align: center
	}

	.store-list .store-item .info-item .item-left .mask {
		width: 100%;
		height: 57px;
		border-radius: 7px;
		background-color: rgba(0, 0, 0, .7);
		position: absolute;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .info-item .item-left .mask .mask-img {
		width: 57px;
		height: 28px
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		;
		font-weight: 700
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		;
		margin: 0 7px
	}

	.store-list .store-item .info-item .item-right .item .progress {
		width: 118px
	}

	.store-list .store-item .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.store-list .store-item .info-item .item-right .item .time-region {
		width: 118px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.store-list .store-item .cashback-item {
		justify-content: space-between;
		align-items: center
	}

	.store-list .store-item .cashback-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		line-height: 19px;
		font-size: 12px
	}

	.store-list .store-item .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.store-list .store-item .more-item {
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .more-item .more-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-right: 7px
	}

	.store-list .store-item .address-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .address-item .address-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 7px
	}

	.store-list .store-item .footer-item {
		padding-bottom: 0;
		color: #f96456;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.menu-navigation {
		height: 100px;
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.menu-navigation .menu-lg {
		width: 25%;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.menu-navigation .menu-lg image {
		width: 100rpx;
		height: 100rpx;
		margin: 15rpx 0;
	}

	.menu-navigation .menu-spot {
		width: 4px;
		background-color: #ff8546;
		padding: 3px 4px;
		border-radius: 3px;
		margin-top: 9px
	}

	.menu-navigation .menu-spot-circular {
		width: 4px;
		background-color: #ff8546;
		border-radius: 50%;
		margin-top: 9px;
		margin-left: 4px
	}

	.menu-navigation .add-c-d {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -19px
	}

	.limit-store-container {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.limit-store-container .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9px;
		border-radius: 9px 9px 0 0;
		background: linear-gradient(180deg, #fff0e9 0, #fff)
	}

	.limit-store-container .header .header-icon {
		height: 14px
	}

	.limit-store-container .header .right {
		display: flex;
		align-items: center
	}

	.limit-store-container .header .right .more-text {
		color: #bec1c7
	}

	.limit-store-container .body .scroll-list {
		display: flex;
		align-items: center;
		width: unset;
		margin: 0 9px
	}

	.limit-store-container .body .scroll-list .scroll-item {
		display: flex;
		flex-flow: column;
		margin-top: 9px;
		margin-right: 9px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row {
		margin-bottom: 4px;
		position: relative
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-img {
		width: 93px;
		height: 69px;
		border-radius: 7px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-name {
		width: 93px;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock-text {
		font-size: 10px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock {
		color: #f96456
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .amount-text {
		font-size: 9px;
		color: #fff;
		border-radius: 0 7px 0 7px;
		background: linear-gradient(270deg, #ff8826 0, #ed3066);
		position: absolute;
		padding: 2px 4px;
		text-align: center;
		bottom: 0;
		left: 0
	}

	.limit-store-container .body .scroll-list .scroll-foot {
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 4px;
		border-radius: 9px;
		background-color: #f0f0f0
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-icon {
		width: 9px;
		height: 9px;
		padding: 2px;
		border: 1px solid #ebebeb;
		border-radius: 50%;
		margin-bottom: 4px
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-text {
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		letter-spacing: 2px
	}
</style>
